{include file="common/header"}
<div id="app" v-cloak>
    <div class="el-pane-warp">
        <el-form ref="ruleForm" :rules="rules" :model="config" label-width="150px">
            <el-form-item label="accessKeyId：" prop="accessKeyId">
                <el-input type="password" v-model="config.accessKeyId" show-password></el-input>
                <el-link href="https://ram.console.aliyun.com/manage/ak" target="_blank">点击取得您的accessKeyId</el-link>
            </el-form-item>
            <el-form-item label="accessKeySecret：" prop="accessKeySecret">
                <el-input type="password" v-model="config.accessKeySecret" show-password></el-input>
                <el-link href="https://ram.console.aliyun.com/manage/ak" target="_blank">点击取得您的accessKeySecret</el-link>
            </el-form-item>
            <el-form-item label="模板管理：">
                <div style="margin-bottom:10px">
                    <el-button @click="push()" type="primary" size="small">添加</el-button>
                    <el-link style="margin-left: 10px;" href="https://dysms.console.aliyun.com/dysms.htm#/domestic/text/sign" target="_blank">
                        点击取得您的签名名称
                    </el-link>
                    <el-link style="margin-left: 10px;" href="https://dysms.console.aliyun.com/dysms.htm#/domestic/text/template" target="_blank">
                        点击取得您的模板CODE
                    </el-link>
                </div>
                <el-table :data="config.template">
                    <el-table-column prop="id" label="模板ID">
                        <template slot-scope="scope">
                            <el-tooltip 
                                v-if="scope.row.id == '26BEKytK3bCe'" 
                                class="item" 
                                effect="dark" 
                                content="这个模板ID固定，在登录、注册、修改密码验证码时需要" 
                                placement="top-start">
                                <span style="color: #409EFF">{{scope.row.id}}</span>
                            </el-tooltip>
                            <span v-else>{{scope.row.id}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="signName" label="签名名称">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.signName" size="mini"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="templateCode" label="模版CODE">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.templateCode" size="mini"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button :disabled="scope.row.id == '26BEKytK3bCe'" @click="remove(scope.row)" type="danger" size="mini">删除</el-button>
                            <el-popover
                                placement="right"
                                width="400"
                                trigger="click">
                                <el-form :model="test" :rules="testRules" ref="test" label-width="0">
                                    <el-form-item prop="phone">
                                        <el-input v-model="test.phone" placeholder="请填写接收手机号" size="mini"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="content">
                                        <el-input v-model="test.content" placeholder='请输入内容' type="textarea"></el-input>
                                        比如变量详情:${code}，那么填写{"code":"1234"}
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button @click="determineSend()" type="warning" size="mini">确定发送</el-button>
                                    </el-form-item>
                                </el-form>
                                <el-button 
                                    slot="reference" 
                                    @click="testSend(scope.row.id)" 
                                    type="warning" 
                                    size="mini">
                                    测试发送
                                </el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
        <div class="el-bottom" style="width: 100%">
            <el-button 
                :loading="loading"
                type="primary" 
                size="medium" 
                icon="el-icon-refresh-right"
                @click="save()">
                保 存
            </el-button>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                testUrl: "alisms/config/test",
                updateUrl: "alisms/config/index",
                test: {
                    templateId: "",
                    phone: "",
                    content: "",
                },
                loading: false,
                config: {:json_encode($config)},
                rules: {
                    accessKeyId: [
                        { required: true, message: '请填写accessKeyId', trigger: 'blur' },
                    ],
                    accessKeySecret: [
                        { required: true, message: '请填写accessKeySecret', trigger: 'blur' },
                    ],
                },
                testRules: {
                    phone: [
                        { required: true, message: '请填写接收短信的手机号', trigger: 'blur' },
                    ],
                    content: [
                        { required: true, message: '请填写发送的内容', trigger: 'blur' },
                    ],
                },
            }
        },
        methods: {
            /**
             * 测试发送
             */
            determineSend() {
                let self = this;    
                self.$refs.test.validate((valid) => {
                    if (valid) {
                        request.post(self.testUrl, self.test, function(res) {
                            self.$notify({showClose: true, message: res.message, type: res.status});
                        });
                    } else {
                        return false;
                    }
                });
            },
            /**
             * 测试发送
             */
            testSend(id) {
                this.save();
                this.test.templateId = id;
            },
            /**
             * 删除模板数据
             */
            remove(row) {
                let index = this.config.template.indexOf(row);
                this.config.template.splice(index, 1);
            },
            /**
             * 添加模板数据
             */
            push() {
                this.config.template.push({id: common.id(12), signName: "", templateCode: ""});
            },
            /**
             * 保存
             */
            save() {
                let self = this;
                self.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        self.loading = true;
                        request.post(self.updateUrl, {value: self.config}, function(res){
                            self.loading = false;
                            self.$notify({showClose: true, message: res.message, type: res.status});
                        });
                    } else {
                        return false;
                    }
                });
            },
        },
    })
</script>
{include file="common/footer"}